<template>
  <div ref="chartLine" :style="{width: '100%', height: '300px'}"></div>
</template>

<script setup name="ChartLine">

import * as echarts from 'echarts';
import { getBrokenLineData } from '@/api/coal/realtimeData';

//import 'echarts-gl';
const chartLine = shallowRef({})
const myChart = shallowRef({})

let flushChart = ref<String>("");

const props = defineProps({
  deviceId: {
    type: Number,
    default: null,
  },
  name: String,
})

const selfDeviceId = ref(props.deviceId)
const timeData = ref([])
const volumeData = ref([])
const weightData = ref([])
const timeTitle = ref('')

onMounted(() => {
  const resizeOb = new ResizeObserver((entries) => {
    for (const entry of entries) {
      echarts.getInstanceByDom(entry.target).resize();
    }
  })
  resizeOb.observe(chartLine.value)
  initChart()
  //随着屏幕大小调节图表
  window.addEventListener("resize", () => {
    myChart.value.resize()
  });

  flushChart = setInterval(()=>{
    // 根据设备id查询折线图数据
    initCharData().then(resp=>{
      myChart.value.setOption({
        title: {
          text: '【'+timeTitle.value+'】'
        },
        xAxis: {
          data: timeData.value,
        },
        series: [
          {
            data: volumeData.value
          },
          {
            data: weightData.value
          }]
      })
    });
  },1000*5)
})



function initChart() {
  nextTick(() => {
    myChart.value = echarts.init(chartLine.value)
    initCharData().then(resp=>{
      initOption();
    })
  })
}

function initCharData(){
  return getBrokenLineData(selfDeviceId.value).then(resp=>{
    timeTitle.value = resp.timeTitle
    timeData.value = resp.timeData
    volumeData.value = resp.volumeData
    weightData.value = resp.weightData
  })
}

function initOption(){
  let option = {
    title: {
      text: '【'+timeTitle.value+'】'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        label: {
          show:true
        }
      },
      formatter: function (params){
        let tip = params[0].axisValue + "<br />"
        if (params !== null && params.length > 0){
          tip += params[0].marker + params[0].seriesName + ':  ' + params[0].value + '立方米<br />'
          tip += params[1].marker + params[1].seriesName + ':  ' + params[1].value + '吨'
        }
        return tip
      },
      feature: {
        dataZoom: {
          yAxisIndex: 'none'
        },
        restore: {},
        saveAsImage: {}
      }
    },
    legend: {
      data: ['体积', '重量']
    },
    grid: { //调整图表上下左右位置
      top:'15%',
      left: '3%',
      right: '3%',
      bottom: '15%',
      containLabel: true
    },

    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: timeData.value,
      axisLabel : {
        showMaxLabel: true,
        interval : 'auto',
        formatter: function (value, index) {
          return value.substring(0,5);
        }
      },
    },
    yAxis: {
      type: 'value'
    },
    dataZoom: [
      {
        type: 'inside',
        start: 0,
        end: 100
      },
      {
        start: 0,
        end: 100
      }
    ],
    series: [
      {
        name: '体积',
        type: 'line',
        smooth: true,
        data: volumeData.value
      },
      {
        name: '重量',
        type: 'line',
        smooth: true,
        data: weightData.value
      }
    ]
  };
  myChart.value.setOption(option)
}

onBeforeUnmount(() => {
  clearInterval(flushChart)
})

</script>
